<template>
    <div class="wrap" :style="{ height: hei + 'px' }">
        <div class="header">
            <span class="name">人脉旺项目管理系统</span>
            <span class="user">
                <el-dropdown trigger="click">
                  <span class="el-dropdown-link" style="color:white">admin<i
                          class="el-icon-caret-bottom el-icon--right"></i></span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>系统设置</el-dropdown-item>
                    <el-dropdown-item>退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
            </span>
        </div>

        <div>
            <el-row :gutter="10">
                <el-col :xs="4" :sm="4" :md="4" :lg="4">
                    <div>
                        <el-menu default-active="1" class="el-menu-vertical-demo" :style="{ height: (hei-80) + 'px' }"
                                 @select="handleSelect">
                            <el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item>
                            <el-menu-item index="2"><i class="el-icon-menu"></i>导航二</el-menu-item>
                            <el-menu-item index="3"><i class="el-icon-setting"></i>导航三</el-menu-item>
                        </el-menu>
                    </div>
                </el-col>
                <el-col :xs="20" :sm="20" :md="20" :lg="20">
                    <div style="margin-top:10px">
                        <router-view></router-view>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    .wrap {
        background-color: #EBEBEB;
        /*min-height: 800px*/
    }

    .header {
        width: 100%;
        height: 80px;
        line-height: 80px;
        background-color: #636363;
        overflow: hidden;
    }

    .name {
        float: left;
        color: #fff;
        margin-left: 1%
    }

    .user {
        float: right;
        margin-right: 1%
    }
</style>
<script type="text/ecmascript-6">
    export default {
        data(){
            return {
                //breadcrumbItems: ['导航一'],
            }
        },
        computed: {
            hei: function () {
                var h = $(window).height();
                return h;
            }
        },
        methods: {
            handleSelect(key, keyPath){
                switch (key) {
                    case '1':
                        this.$router.push('/Page1');
                        break;
                    case '2':
                        this.$router.push('/Page2')
                        break;
                    case '3':
                        this.$router.push('/Page3')
                        break;
                }
            },
        }
    }
</script>
